<template>
	<view class="content">
		<div class="uni-padding-wrap uni-common-mt card-list">
			<view class="card-tab">
				<div class="card-row-one">
					<div class="first_line">
						<text class="first_line_text">内容</text>
					</div>
					<sd-collapse :accordion="true">
						<sd-collapse-item class="notice-list" v-for="item in accordion" :key="item.id" :title="item.title" :date="item.date"
						 :show-animation="true" >
							<text class="collapse-item" @click='goToDetail(item.id)'>{{ item.content }}</text>
						</sd-collapse-item>
					</sd-collapse>
				</div>
			</view>
		</div>
	</view>
</template>

<script>
	import sdCollapse from '@/components/sd-collapse/uni-collapse.vue'
	import sdCollapseItem from '@/components/sd-collapse-item/uni-collapse-item.vue'
	export default {
		components: {
			sdCollapse,
			sdCollapseItem
		},
		data() {
			return {
				//卡数据url
				cardDataUrl: 'card-customer/listUserCard',
				cardSingleDataUrl: '/card/getCardData',
				deleteCard: '/card-customer/untyingCard',
				cardListData: [],
				noticeListUrl: '/notice/list',
				//激活的bg颜色
				activateBg: '#0ac083',
				deactivateBg: '#ffa648',
				otherStatusBg: '#989898',

				data: [],
				loadMoreText: "加载中...",
				showLoadMore: true,
				animationData: null,
				page: {
					size: 10,
					current: 1
				},
				timerList: [],
				accordion: []
			};
		},
		onUnload() {
			this.page = {
				size: 10,
				current: 1
			}
			this.accordion = []
			this.showLoadMore = false;
		},
		onReachBottom() {
			this.showLoadMore = true;
			this.page.current++
			setTimeout(() => {
				this.initData();
			}, 300);
		},
		onPullDownRefresh() {
			this.page = {
				size: 10,
				current: 1
			}
			this.accordion = []
			this.initData();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onLoad() {
			if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
		　　		WeixinJSBridge.invoke('setFontSizeCallback', {
			　　		'fontSize': 0
			　　});
			　　// 重写设置网页字体大小的事件
			　　WeixinJSBridge.on('menu:setfont', function () {
			　　　　WeixinJSBridge.invoke('setFontSizeCallback', {
			　　　　　　'fontSize': 0
			　　　　});
			　　});
			　
			};
			this.initData();
		},
		methods: {
			initData() {
				setTimeout(() => {
					this.list = this.$req.crm(this.noticeListUrl, {
						dictNoticeType: "C",
						page: this.page
					}).then(v => {
						if (v.data.records) {
							let list = v.data.records.map(t => {
								let obj = {}
								obj.id = t.id;
								obj.title = t.title
								obj.content = t.title
								obj.date = t.insertTimeDate
								return obj
							})
							this.accordion = this.accordion.concat(list)
						} else {
							if(this.page.current==1){
								this.accordion.push({
									title: '暂无消息',
									date: '',
									content: '请等候管理员通知~'
								})
							}
							uni.stopPullDownRefresh();
						}
					})
				}, 300);

			},
			goToDetail(id){
				console.log(id)
				uni.navigateTo({
					url: '/pages/message/messageDetail?id=' + id
				});
			}

		}
	};
</script>
<style lang="scss">
	@import '@/uni.scss';

	.notice-list {
		/deep/.uni-collapse-cell__title-text {
			text-align: left;
		}
	}

	.text {
		margin: 16rpx 0;
		width: 100%;
		background-color: #fff;
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		color: #555;
		border-radius: 8rpx;
	}

	.content {
		text-align: center;
		/* height: 400upx; */
		background-color: $theme-color !important;
		min-height: 100vh;
		padding-bottom: 40rpx;
	}

	.card-list {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
	}

	.card-tab {
		position: relative;
		background-color: #FFFFFF;
		width: 90%;
		border-radius: 5px;
		margin-top: 25upx;
		overflow: hidden;
		// padding: 20upx;
	}

	.card-row-one {
		display: flex;
		flex-direction: column;
		// height: 50upx;
		font-size: small;

		// justify-content: space-between;
		.first_line {
			width: 100%;
			height: 100rpx;
			position: relative;
			// display: flex;
			// flex-direction: row;
			// justify-content: space-between;
			// justify-items: center;
		}

		.first_line_text {
			position: absolute;
			left: 40rpx;
			top: 50%;
			margin-top: -20rpx;
			width: 80rpx;
			height: 40rpx;
			line-height: 40rpx;
			background-color: #78a8f2;
			border-radius: 8rpx;
			color: #FFFFFF;
			letter-spacing: 4rpx;
			text-align: center;
		}
	}


	.card-number {
		display: flex;
		color: $font-bule-color;
		margin-left: 10px;
		font-weight: bold;
		letter-spacing: 2upx;
		width: 75%;
	}

	.card-status {
		border-radius: 8px;
		height: 36upx;
		color: white;
		width: 180upx;
		margin-right: 0px;

		display: flex;
		justify-content: center;
		align-items: center;

	}





	.card-row-tow {
		display: flex;
		justify-content: space-between;
		margin-top: 5px;

		.card-four-number {
			font-size: 35upx;
			text-align: left;
		}

		.card-mb {
			display: flex;
			flex-direction: column;

		}

		.card-four-font {
			color: $font-grey-color;
			font-size: small;
			text-align: left;
		}
	}

	.card-row-three {
		display: flex;
		justify-content: space-between;
		margin-top: 5upx;

		.three-balance {
			font-size: medium;
		}

		.recharge-button {
			font-size: small;
			width: 120upx;
			background-color: $theme-color;
			color: white;
			border-radius: 10px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.card-row-four {
		position: relative;
		width: 100%;
		height: 105upx;
		display: flex;
		align-items: center;

		.four-left {
			font-size: small;
			position: absolute;
			left: 0px;
			width: 240upx;
			text-align: left;



		}

		.four-right {
			display: flex;
			position: absolute;
			right: 0px;
			font-size: 20upx;

			color: $theme-color;
		}

		.four-btn {
			margin-left: 28px;

		}

		.btn-size {
			font-size: 21px;
		}

		.btn-color {

			color: $theme-color;


		}

		.btn-blue {
			color: #007AFF !important;

		}
	}

	.card-row-five {
		display: flex;
		justify-content: flex-end;
		margin-top: 5px;

		uni-button {

			margin-right: 0px;
			margin-left: 10px;

		}
	}

	.card-btn {
		border-radius: 8px;
		height: 35upx;

		color: #646464;
		padding-left: 10px;
		padding-right: 10px;
		font-size: small;
		border: 1px solid $font-grey-color;
	}

	.card-recharge-btn {

		@extend .card-btn;
		border: 1px solid $font-bule-color !important;
		color: $font-bule-color !important;
	}

	.card-detail {
		background-color: #ffa648 !important;
		border: 1px solid #ffa648 !important;
		color: white !important;
	}

	.card-copy {
		background-color: #0ac083 !important;
		border: 1px solid #0ac083 !important;
		color: white !important;
	}

	.card-order {
		background-color: #f04806 !important;
		border: 1px solid #f04806 !important;
		color: white !important;

	}

	.line {
		background-color: #f2f2f2;
		height: 1px;
	}

	.ininer-line {
		background-color: $theme-color;
		position: absolute;
		width: 50%;
		height: 1px
	}
</style>
